<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" @emptyViewReload="toRelease" :empty-view-reload-text="empty.emptyBtnText" :empty-view-reload-style="empty.emptyToReleaseStyle" :show-empty-view-reload-when-error="false" :show-empty-view-reload="true" :empty-view-img="empty.emptyImgUrl" :empty-view-img-style="empty.emptyImgStyle" :empty-view-text="empty.emptyText">
			
			<navComment :navTitle="'收到的赞'" :navRightTitle="'一键删除'" @navRight="allAlreadyRead"></navComment>
			
			<view class="box-pading" style="margin-top: 60rpx;">
				<commentItem :ifAlreadyRead="item.isRead === 0 ? false : true" v-for="(item,index) in dataList" :key="item.id" :record="item" :ifComment="false" ></commentItem>
			</view> 
			
		</z-paging>
		
		<!-- 弹窗 -->
		<u-popup :show="popupShow" mode="center" :round="10"  @close="popupClose" @open="popupOpen">
			
			<view class="popup-box">
				
				<view class="popup-title">
					一键删除
				</view>
				
				<view class="popup-subhead">
					将清空所有消息
				</view>
				
				<view class="popup-bottom flex-no-horizontal">
					
					<view>
						<u-button type="primary" class="popup-bottom-cancel" text="取消" @click="popupCancel"></u-button>
					</view>
					
					<view>
						<u-button type="primary" class="popup-bottom-confirm" text="确定" @click="popupConfirm"></u-button>
					</view>
					
				</view>
				
			</view>
			
		</u-popup>
		
	</view>
</template>

<script>
	import {unreadLikeListApi,delAllLikeApi,readLikeAddApi} from '../../api/index.js'
	import commentItem from './common/receivedCommet.vue'
	import navComment from './common/navCommentOrLike.vue'
	export default {
		components:{
			commentItem,
			navComment
		},
		data() {
			return {
				dataList:[],
				popupShow:false,
				empty:{
					emptyText:'您还没收到赞，先去发布一条动态吧～',
					emptyImgUrl:'/static/empty/like-empty.png',
					emptyImgStyle:{
						width:'228px',
						height:'172px'
					},
					emptyToReleaseStyle:{
						padding:'10px 30px',
						backgroundColor:'#4ABC5A',
						borderRadius:'20px',
						color:'#FFFFFF',
						border:'none'
					},
					emptyBtnText:'去发布'
				},
			};
		},
		computed: { 
	
		},
		onLoad() {
			
		},
		methods: {
			//一键已读
			allAlreadyRead(){
				console.log('一键已读')
				if(this.dataList.length !== 0){
					this.popupShow = true
				}
			},
			
			//空状态，去发布
			toRelease(e){
				e(false);
				uni.navigateTo({
					url:'./releaseDynamic'
				})
			},
			
			//弹窗关闭
			popupClose(){
				
			},
			
			//弹窗打开
			popupOpen(){
				
			},
			
			//弹窗取消
			popupCancel(){
				this.popupShow = !this.popupShow
			}, 
			
			//弹窗确认
			async popupConfirm(){
				try{
					//一键删除
					const res = await delAllLikeApi({
						isAll:1
					})
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
				this.$refs.paging.reload()
				this.popupShow = !this.popupShow
			},
			
			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try{
					//获取未读的点赞
					const res = await unreadLikeListApi({
						pageNum:pageNo,
						pageSize
					})
					if(res.count){
						await this.allReadLike()
					}
					this.$refs.paging.complete(res.data || []);
				}catch(e){
					console.log(e)
					//TODO handle the exception
					this.$refs.paging.complete(false);
				}
				
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			
			// 已读所有点赞
			async allReadLike(){
				try{
					const res = await readLikeAddApi({
						isAll:1
					})
					this.$refs.paging.reload()
				}catch(e){
					//TODO handle the exception
				}
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.popup-box{
		width: 560rpx;
		height: 360rpx;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		
		.popup-title{
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-xlg;
			font-weight: bold;
			margin: 60rpx 0 40rpx 0;
		}
		.popup-subhead{
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-base;
			margin-bottom: 60rpx;
		}
		.popup-bottom{
			width: 100%;
			justify-content: space-around;
			
			view{
				width: 235rpx;
				height: 80rpx;
				
			}
			
			.popup-bottom-cancel{
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(247, 247, 247, 1);
				font-size: $uni-font-size-base;
				color: rgba(178, 180, 181, 1);
			}
			
			.popup-bottom-confirm{
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(255, 58, 58, 1);
				font-size: $uni-font-size-base;
				color: #FFFFFF;
			}
			
		}
	}
</style>
